<html>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        background-color: white;
        font-size: small;
    }

    div {
        display: flex;
    }

    .outer {
        /* background-color: aquamarine; */
        height: 100%;
        flex-direction: column;
    }

    .row1 {
        height: 110px;
        flex-direction: row;
        width: 100%;
        background-color: rgb(230, 230, 230);
    }

    .row1 .col1 {
        margin: 5px;
        background-color: rebeccapurple;
        width: 100px;
        height: 100px;
    }

    .row1 .col2 {
        /* background-color: bisque; */
        flex: 1;
        margin: 5px;
        flex-direction: column;
        /* height: 100%; */
    }

    .row1 .col2 div {
        margin: 5px;
    }

    .row2 {
        /* flex: 1; */
        /* height: 100%; */
        /* background-color: aquamarine; */
        padding: 15px;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .row2 .inputRow {
        height: 24px;
        align-items: center;
        width: 100%;
        margin-bottom: 3px;

    }

    .row2 .inputRow input {
        flex: 1;

        /* width: 100%; */
        /* background-color: rebeccapurple; */
    }

    .row2 .inputRow label {
        width: 48px;
        text-align: right;
        margin-right: 5px;
    }

    .row3 {
        width: 100%;
        margin-top: -10px;
        /* background-color: burlywood; */
        flex-flow: row-reverse;
    }

    .row3 button {
        width: 100px;
        height: 30px;
        margin-right: 15px;
        float: right;
    }
</style>

<body>
    <div class="outer">
        <div class="row1">
            <div class="col1"><img id="image_show" onclick="imageClick()" src="../assets/icon/no_image.png" /></div>
            <div class="col2">
                <div>
                    <div style="font-weight: bold;">作者：</div><input id="author" style="flex: 1;" value="重庆灯海文化"></input>
                </div>
                <div>
                    <div>说明：</div><textarea id="description" name="description"
                        style="flex: 1;height: 57px;resize: none;"></textarea>
                </div>
            </div>
        </div>
        <div class="row2">
            <div class="inputRow"><label>名称</label><input id="light_name" value="未命名灯具" placeholder="未填写保持原值" /></div>
            <div class="inputRow"><label>类别</label><input id="light_category" value="未知类型" placeholder="未填写保持原值" />
            </div>
            <div class="inputRow"><label>厂家</label><input id="manufacturer" value="重庆灯海文化" placeholder="未填写保持原值" />
            </div>
            <div class="inputRow"><label>通道数</label><input id="channel_count" min="1" max="512" type="number" value="1"
                    placeholder="未填写保持原值" /></div>
            <div class="inputRow"><label>灯号</label><input id="fixture_id" min="1" type="number" value="1"
                    placeholder="未填写保持原值" /></div>
            <div class="inputRow"><label>域</label><input id="universe" min="1" max="512" type="number" value="1"
                    placeholder="未填写保持原值" /></div>
            <div class="inputRow"><label>地址</label><input id="dmx_address" min="1" max="512" type="number" value="1"
                    placeholder="未填写保持原值" /></div>
        </div>
        <div class="row3">
            <button onclick="sendDataForEdit()">确定</button>
        </div>
    </div>
</body>
<script>
    window.onload = function () {
        sketchup.IwantGetLightAttr()
    }

    // 标记当前模式
    new_mod = ''

    function sendDataForEdit() {
        temp = {
            author: document.getElementById('author').value || "重庆灯海文化",
            description: document.getElementById('description').value || "",
            light_name: document.getElementById('light_name').value || "未命名灯具",
            light_category: document.getElementById('light_category').value || "未知类型",
            manufacturer: document.getElementById('manufacturer').value || "重庆灯海文化",
            channel_count: parseInt(document.getElementById('channel_count').value),
            fixture_id: document.getElementById('fixture_id').value != '0' ? Math.floor(parseInt(document.getElementById('fixture_id').value), 1) : 1,
            universe: document.getElementById('universe').value != '0' ? Math.floor(parseInt(document.getElementById('universe').value)) : 1,
            dmx_address: document.getElementById('dmx_address').value != '0' ? Math.floor(parseInt(document.getElementById('dmx_address').value)) : 1
        }
        if (new_mod == 'edit') {
            sketchup.IwantEditLightsAttr(temp)
        }
        else {

            sketchup.IwantSetAttrOfNewLight(temp)
        }
    }

    function getNumber(str) {
        if (parseInt(str) == 0) return 0
        if (isNaN(parseInt(str))) return 0
        return parseInt(str)

    }

    function receiveDataFromRuby(v) {
        obj = JSON.parse(v)
        console.log(obj)
    }

    function imageClick() {

    }

    // 获取灯具信息从“修改灯具”
    function get_light_info_form_ruby(data) {
        const result = {};
        arry_data = JSON.parse(data)
        for (const light of arry_data) {
            // 遍历对象的每个键
            for (const key in light) {
                if (!result.hasOwnProperty(key)) {
                    result[key] = light[key];  // 初始赋值
                } else if (result[key] !== light[key]) {
                    result[key] = "";  // 如果发现不同的值，将结果设置为空字符串
                }
            }
        }
        document.getElementById('author').value = result['author']
        document.getElementById('channel_count').value = result['channel_count']
        document.getElementById('description').value = result['description']
        document.getElementById('dmx_address').value = result['dmx_address']
        document.getElementById('fixture_id').value = result['fixture_id']
        document.getElementById('light_category').value = result['light_category']
        document.getElementById('light_name').value = result['light_name']
        document.getElementById('manufacturer').value = result['manufacturer']
        document.getElementById('universe').value = result['universe']
        new_mod = 'edit'
    }

    var intervalId = setInterval(function () {
        // location.reload();
    }, 500);
</script>

</html>